<template>
	<view class="view">
		<u-form :model="form" ref="uForm" style="height: 100%" label-width="auto">
			<viewItem
				v-for="item in drawList"
				:config="item"
				:form="form"
				:key="item.id"
				:ref="item.id"
				@value="handlerChangeValue"
				@handlerButtonClick="handlerButtonClick"
				@fileListChange="fileListChange"
			></viewItem>
		</u-form>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
import viewItem from './view-item.vue'
import { getFormJson, getJsonData } from '../../http/api.js'

export default {
	components: {
		viewItem,
	},
	data() {
		return {
			drawList: [],
			form: {},
			rules: {},
			option: {},
		}
	},
	onLoad(option) {
		this.option = option
		uni.setNavigationBarTitle({
			title: option.name,
		})
	},
	onUnload: function () {
		//页面被卸载时被执行
		uni.switchTab({
			url: '/pages/index/index',
		})
	},
	methods: {
		handlerChangeValue(val, id, valueLabel) {
			let res = this.drawList.find(i => i.id === id)
			this.$set(this.form, res.key, val)
		},
		fileListChange(list, id) {
			let res = this.drawList.find(i => i.id === id)
			res.filelist = list
		},
		handlerButtonClick(data) {
			if (data.formType === 'reset') {
				this.$refs.uForm.resetFields()
			} else if (data.formType === 'submit') {
				if (data.url && data.url.includes('http')) {
					let arr = this.drawList.filter(i => i.tag === 'u-upload')
					let erorItem = arr.find(i => {
						return i.required && i.filelist.length === 0
					})
					if (erorItem) {
						this.$refs.uToast.show({
							title: '请上传图片后提交',
							type: 'error',
						})
					} else {
						this.$refs.uForm.validate(valid => {
							if (valid) {
								arr.forEach(i => {
									this.$refs[i.id][0].$refs['uUpload'].upload()
								})
								this.$u[data.method](
									data.url,
									{
										formDataJsonMap: {
											...this.form,
										},
										...this.option,
									},
									{ Authorization: uni.getStorageSync('token') },
								).then(({ head, data }) => {
									if (head.code == 200) {
										this.$router.navigateTo({
											url: '/pages/appFormGenerator/callBack',
										})
									} else {
										this.$refs.uToast.show({
											title: '网络出错,请重试！',
											type: 'error',
										})
									}
								})
							} else {
								this.$refs.uToast.show({
									title: '请检查必填项',
									type: 'error',
								})
							}
						})
					}
				} else {
					this.$refs.uToast.show({
						title: '请检查提交地址',
						type: 'error',
					})
				}
			}
		},
		getList(json) {
			getFormJson({ id: this.option.id }).then(res => {
				if (res.head.code === 200) {
					if (res.data) {
						let value = res.data
						if (value && value.length > 0) {
							value.forEach(i => {
								if (i.key) {
									this.rules[i.key] = i.rules
									if (i.key && json.hasOwnProperty(i.key)) {
										i.value = json[i.key]
										this.$set(this.form, i.key, json[i.key] || null)
									}
								}
							})
						}
						this.drawList = this.$u.deepClone(value)
						this.$refs.uForm.setRules(this.rules)
					}
				}
			})
		},
		getJsonData() {
			getJsonData({
				formJsonId: this.option.id,
				formDataJsonId: this.option.formDataJsonId,
			}).then(({ head, data }) => {
				if (head.code == 200) {
					let json = data.formDataJson ? JSON.parse(data.formDataJson) : {}
					if (Object.keys(json).length > 0) {
						this.getList(json)
					}
				}
			})
		},
		getJsonList() {
			getFormJson({ id: this.option.id }).then(res => {
				if (res.head.code === 200) {
					if (res.data) {
						let value = res.data
						this.drawList = this.$u.deepClone(value)
						if (value && value.length > 0) {
							this.drawList.forEach(i => {
								if (i.key) {
									this.rules[i.key] = i.rules
									if (i.key) {
										this.$set(this.form, i.key, i.value || null)
									}
								}
							})
						}
						this.$refs.uForm.setRules(this.rules)
					}
				}
			})
		},
	},
	mounted() {
		if (this.option.getFormData) {
			this.getJsonData()
		} else {
			this.getJsonList()
		}
	},
}
</script>

<style lang="scss" >
.view {
	padding: 30rpx;
}
</style>